<template>
  <div class="warpper-box">
    <div class="inner_box">
      <el-form label-width="60px">
        <div class="duo-box">
          <el-card class="duo-psm">
              <div slot="header" class="clearfix">
                <span class="front-title">完税证明</span>
                <el-button
                  size="mini"
                  @click="submitForm()"
                  style="float:right"
                  type="primary"
                  >立即创建</el-button
                >
              </div>
              <el-form-item label="标题">
                <el-input
                  v-model="ruleForm.egimg1"
                  placeholder="请输入示例标题"
                ></el-input>
              </el-form-item>
              <el-form-item label="示例图">
                <el-upload
                  accept="image/*"
                  list-type="picture"
                  :on-preview="handlePreview"
                  :file-list="egimg1FileList"
                  :on-remove="egimg1Remove"
                  :before-upload="beforeAvatarUpload"
                  action="#"
                  :http-request="egimg1ChangeFile"
                >
                  <el-button type="primary" size="mini">上传</el-button>
                  <div
                    slot="tip"
                    style="display: inline-block;margin-left: 20px;"
                    class="el-upload__tip"
                  >
                    支持图片，建议宽高600*600
                  </div>
                </el-upload>
              </el-form-item>
            </el-card>
            <el-card class="duo-psm">
              <div slot="header" class="clearfix">
                <span class="front-title">社保缴纳证明</span>
                <el-button
                  size="mini"
                  @click="submitForm()"
                  style="float:right"
                  type="primary"
                  >立即创建</el-button
                >
              </div>
              <el-form-item label="标题">
                <el-input
                  v-model="ruleForm.egimg2"
                  placeholder="请输入示例标题"
                ></el-input>
              </el-form-item>
              <el-form-item label="示例图">
                <el-upload
                  accept="image/*"
                  list-type="picture"
                  :on-preview="handlePreview"
                  :file-list="egimg2FileList"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="egimg2Remove"
                  action="#"
                  :http-request="egimg2ChangeFile"
                >
                  <el-button type="primary" size="mini">上传</el-button>
                  <div
                    slot="tip"
                    style="display: inline-block;margin-left: 20px;"
                    class="el-upload__tip"
                  >
                    支持图片，建议宽高600*600
                  </div>
                </el-upload>
              </el-form-item>
            </el-card>

            <el-card class="duo-psm">
              <div slot="header" class="clearfix">
                <span class="front-title">商业证明</span>
                <el-button
                  size="mini"
                  @click="submitForm()"
                  style="float:right"
                  type="primary"
                  >立即创建</el-button
                >
              </div>
              <el-form-item label="标题">
                <el-input
                  v-model="ruleForm.egimg3"
                  placeholder="请输入示例标题"
                ></el-input>
              </el-form-item>
              <el-form-item label="示例图">
                <el-upload
                  accept="image/*"
                  list-type="picture"
                  :on-preview="handlePreview"
                  :file-list="egimg3FileList"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="egimg3Remove"
                  action="#"
                  :http-request="egimg3ChangeFile"
                >
                  <el-button type="primary" size="mini">上传</el-button>
                  <div
                    slot="tip"
                    style="display: inline-block;margin-left: 20px;"
                    class="el-upload__tip"
                  >
                    支持图片，建议宽高600*600
                  </div>
                </el-upload>
              </el-form-item>
            </el-card>
        </div>
      </el-form>
    </div>
    <el-dialog title="图片预览" :visible.sync="dialogVisible">
      <img :src="previewUrl" alt="图片预览" class="previcew-img" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { systemSupplierInfoSave, getDetailByKey } from "@/api/about_api";
export default {
  data() {
    return {
      dialogVisible: false,
      previewUrl: "",
      ruleForm: {
        egimg1: "",
        egimg2: "",
        egimg3: ""
      },
      ruleList: [],
      egimg1FileList: [],
      egimg2FileList: [],
      egimg3FileList: []
    };
  },
  computed: {
    ...mapGetters(["uploadType"])
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    ...mapActions({
      uploadFile: "user/uploadFile"
    }),
    async getInfo() {
      this.egimg1FileList = [];
      this.egimg2FileList = [];
      this.egimg3FileList = [];
      for (let key in this.ruleForm) {
        this.getKeyResult(key);
      }
    },
    getKeyResult(dataKey) {
      return new Promise(async (resolve, reject) => {
        let { code, data } = await getDetailByKey(dataKey);
        if (code === 200) {
          const regex = /#~#/;
          var pwdblank = /^\S*$/;
          if (data && "egimg1" == data.key) {
            if (data.value) {
              if (!pwdblank.test(data.value)) {
                this.ruleForm.egimg1 = ''
                this.egimg1FileList = []
              } else {
                if (regex.test(data.value)) {
                  const parts = data.value.split("#~#");
                  this.ruleForm.egimg1 = parts[0];
                  this.egimg1FileList = JSON.parse(parts[1]);
                } else {
                  this.egimg1FileList = JSON.parse(data.value);
                }
              }
            }
          }
          if (data && "egimg2" == data.key) {
            if (data.value) {
              if (!pwdblank.test(data.value)) {
                this.ruleForm.egimg2 = ''
                this.egimg2FileList = []
              } else { 
                if (regex.test(data.value)) {
                  const parts = data.value.split("#~#");
                  this.ruleForm.egimg2 = parts[0];
                  this.egimg2FileList = JSON.parse(parts[1]);
                } else {
                  this.egimg2FileList = JSON.parse(data.value);
                }
              }
            }
          }
          if (data && "egimg3" == data.key) {
            if (data.value) {
              if (!pwdblank.test(data.value)) {
                this.ruleForm.egimg3 = ''
                this.egimg3FileList = []
              } else { 
                if (regex.test(data.value)) {
                  const parts = data.value.split("#~#");
                  this.ruleForm.egimg3 = parts[0];
                  this.egimg3FileList = JSON.parse(parts[1]);
                } else {
                  this.egimg3FileList = JSON.parse(data.value);
                }
              }
            }
          }
          if (data) {
            const rule = this.ruleList.map(v => v.id);
            if (!rule.includes(data.id)) {
              this.ruleList.push(data);
            }
          }
          resolve(true);
        }
      });
    },
    handlePreview(file) {
      this.previewUrl = file.url;
      this.dialogVisible = true;
    },
    async egimg1ChangeFile(file, fileList) {
      const fileKey = this.uploadType["egimg1"];
      const url = await this.uploadFile({ fileKey: fileKey, data: file });
      if (url) {
        this.egimg1FileList.push({ name: file.file.name, url: url });
      }
    },
    async egimg2ChangeFile(file, fileList) {
      const fileKey = this.uploadType["egimg2"];
      const url = await this.uploadFile({ fileKey: fileKey, data: file });
      if (url) {
        this.egimg2FileList.push({ name: file.file.name, url: url });
      }
    },
    async egimg3ChangeFile(file, fileList) {
      const fileKey = this.uploadType["egimg3"];
      const url = await this.uploadFile({ fileKey: fileKey, data: file });
      if (url) {
        this.egimg3FileList.push({ name: file.file.name, url: url });
      }
    },
    egimg1Remove(file, fileList) {
      const index = this.egimg1FileList.indexOf(file);
      if (index > -1) {
        this.egimg1FileList.splice(index, 1);
      }
    },
    egimg2Remove(file, fileList) {
      const index = this.egimg2FileList.indexOf(file);
      if (index > -1) {
        this.egimg2FileList.splice(index, 1);
      }
    },
    egimg3Remove(file, fileList) {
      const index = this.egimg3FileList.indexOf(file);
      if (index > -1) {
        this.egimg3FileList.splice(index, 1);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("营业执照只能是 jpeg，png，jpg 格式!");
      }
      return isJPG;
    },
    async submitForm() {
      let params5 = {};
      params5.key = "egimg1";
      params5.value = " ";
      const obj5 = this.ruleList.find(v => v.key == 'egimg1')
       if (obj5) {
          params5.id = obj5.id
        }
      if (this.ruleForm.egimg1) {
        params5.value = this.ruleForm.egimg1;
        if (this.egimg1FileList.length) {
          let mergedResult = JSON.stringify(this.egimg1FileList);
          params5.value = this.ruleForm.egimg1 + "#~#" + mergedResult;
        }
      } else {
        if (this.egimg1FileList.length) {
          params5.value = JSON.stringify(this.egimg1FileList);
        }
      }

      let params6 = {};
      params6.key = "egimg2";
      params6.value = " ";
      const obj6 = this.ruleList.find(v => v.key == 'egimg2')
       if (obj6) {
          params6.id = obj6.id
        }
      if (this.ruleForm.egimg2) {
        params6.value = this.ruleForm.egimg2;
        if (this.egimg2FileList.length) {
          let mergedResult = JSON.stringify(this.egimg2FileList);
          params6.value = this.ruleForm.egimg2 + "#~#" + mergedResult;
        }
      } else {
        if (this.egimg2FileList.length) {
          params6.value = JSON.stringify(this.egimg2FileList);
        }
      }

      let params7 = {};
      params7.key = "egimg3";
      params7.value = " ";
      const obj7 = this.ruleList.find(v => v.key == 'egimg3')
       if (obj7) {
          params7.id = obj7.id
        }
      if (this.ruleForm.egimg3) {
        params7.value = this.ruleForm.egimg3;
        if (this.egimg3FileList.length) {
          let mergedResult = JSON.stringify(this.egimg3FileList);
          params7.value = this.ruleForm.egimg3 + "#~#" + mergedResult;
        }
      } else {
        if (this.egimg3FileList.length) {
          params7.value = JSON.stringify(this.egimg3FileList);
        } 
      }

      let arr = [params5, params6, params7];
      const { code } = await systemSupplierInfoSave(arr);
      if (code === 200) {
        this.$message.success("操作成功");
        this.getInfo();
      }
    }
  }
};
</script>
<style scoped>
.duo-box{
  display: flex;
  grid-column-gap: 15px;
}
.duo-psm{
  flex: 1;
}
</style>